<template>
    <div class="cart">
        <div class="check">
            <van-checkbox checked-color="#92da76" v-model="it.checked"></van-checkbox>
        </div>
        <div class="box">
            <img :src="`${baseURL}${ it.bgUrl}`" alt="">
            <div class="info">
                <div class="title">{{it.name}}</div>
                <div class="price">
                    ￥<span>{{ it.price }}</span>
                </div>
                <div class="btn">
                    <van-button @click="btnEvt('minus')" round icon="minus" type="primary" size="mini" color="#e5e5e5"/>
                    {{ it.count }}
                    <van-button @click="btnEvt('add')" round icon="plus" type="primary" size="mini" color="#e5e5e5" />
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
const baseURL = window.baseURL
const props = defineProps({
    it:{
        type: Object,
        required: true
    }
})

const emit = defineEmits()
function btnEvt(type:string){
    emit('btnEvt',props.it.id,type)
}
</script>

<style lang="less" scoped>
@import url('../../style/comon.less');
.cart{
    width: 100%;
    // height: 6rem;
    display: flex;
    background-color: #fff;
    border-radius: 1rem;
    margin-bottom: 6px;
    .check{
        height: 1rem;
        padding-left: .4rem;
        margin: 2.5rem 0;
        margin-right: .3rem;
    }
    .box{
        flex: 1;
        display: flex;
        img{
            width: 4.5rem;
            height: 4.5rem;
            margin: .5rem 0;
        }
        .info{
            flex: 1;
            // width: 0;
            padding:0 .5rem;
            position: relative;
            .title{
                font-size: .8rem;
                line-height: 4rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: normal;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                display: -webkit-box;
            }
            .price{
                font-size: .6rem;
                float: left;
                color: @b1;
                span{
                    font-size: 1rem;
                }
            }
            .btn{
                float: right;
                font-size: .8rem;
                color: @b1;
                .van-button{
                    vertical-align: middle;
                }
            }
        }
    }
}
</style>